<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="../node_modules/lodash/lodash.js"></script>
</head>
<body>
<div id="hd">
    <li v-for="(v,k) in comments">
        {{v.id}}-{{v.content}} <input type="button" value="删除" v-on:click="del(k)">
    </li>
    <input type="text" v-model="search_con" v-on:keyup.enter="search()">
    <textarea name="" id="" cols="30" v-model="commentContent" rows="10"></textarea>
    <input type="button" v-on:click="push('after')" value="发表在后面">
    <input type="button" v-on:click="push('pre')" value="发表在前面">
    <input type="button" v-on:click="pop('pre')" value="从前面删除">
    <input type="button" v-on:click="pop('after')" value="从后面删除">
    <input type="button" v-on:click="sort" value="排序">
    <input type="button" v-on:click="reserve" value="反转">
</div>
<script>
    var app=new Vue({
        el:'#hd',
        data:{
            search_con:'',
            commentContent:'',
            comments:[
                {id:1,content:'后盾人'},
                {id:2,content:'后盾人'},
                {id:3,content:'后盾人'},
                {id:4,content:'后盾人'},
                {id:5,content:'后盾人'},
                {id:6,content:'后盾人'},
                {id:7,content:'后盾人'},
                {id:8,content:'后盾人'}
            ]
        },
        methods:{
            search(){
                this.comments=this.comments.filter((item)=>{
                    var reg=new RegExp(this.search_con,'i');
                   return reg.test(item.content);
                })
            },
            reserve(){
                this.comments.reverse();
            },
            sort(){
                this.comments.sort(function(a,b){
                    return a.id<b.id;
                })
            },
            del(k){
                this.comments.splice(k,1);
            },
            push(dire){
                var id=this.comments.length+1;
                var con={id:id,content:this.commentContent};
                switch(dire){
                    case 'pre':
                    this.comments.unshift(con);
                        break;
                   case 'after':
                       this.comments.push(con);
                       break;
                }
                this.commentContent='';
            },
            pop(dire){
                var con={content:this.commentContent};
                switch(dire){
                    case 'pre':
                        this.comments.shift();
                        break;
                    case 'after':
                        this.comments.pop();
                        break;
                }
                this.commentContent='';
            }
        }
    })

</script>
</body>
</html>